import Vue from 'vue'
// 预览图片
Vue.directive('preview', {
  bind: function(el, binding) {
    el.addEventListener('click', function() {
      // 创建一个浮层
      const viewer = document.createElement('div')
      viewer.style.position = 'fixed'
      viewer.style.top = 0
      viewer.style.left = 0
      viewer.style.width = '100%'
      viewer.style.height = '100%'
      viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'
      viewer.style.zIndex = 9999
      viewer.onclick = function() {
        document.body.removeChild(viewer)
      }

      // 创建图片元素并添加到浮层中
      const img = new Image()
      img.src = binding.value
      img.style.position = 'absolute'
      img.style.cursor = 'pointer'
      img.style.maxWidth = '80%'
      img.style.maxHeight = '80%'
      img.style.top = '50%'
      img.style.left = '50%'
      img.style.transform = 'translate(-50%, -50%)'
      viewer.appendChild(img)

      document.body.appendChild(viewer)
    })
  }
})

